<template>
    <div class="out-style">
        <div class="content">
            <div class="title">复核信息</div>
            <van-form validate-first @submit="onSubmit" @failed="onFailed">
                <van-field
                        v-model="formItem.name"
                        name="name"
                        label="真实姓名："
                        @focus="bodyScrollTop"
                        type="text"
                        placeholder="请填写真实姓名"
                />
                <van-field
                        v-model="formItem.card_no"
                        name="card_no"
                        label="证件号码："
                        @focus="bodyScrollTop"
                        type="text"
                        placeholder="请填写有效证件号"
                />
                <van-field
                        v-model="formItem.tel"
                        name="tel"
                        label="手机号："
                        @focus="bodyScrollTop"
                        type="text"
                        placeholder="请填写有效手机号"
                        :rules="[{ validator: phoneValidator, message: '手机号码格式有误' }]"
                />
                <!--<van-field
                        v-if="false"
                        readonly
                        clickable
                        name="area"
                        :value="formItem.area"
                        label="所在区县(市)："
                        @focus="bodyScrollTop"
                        placeholder="请选择所在区县(市)"
                        :rules="[{ validator: areaValidator, trigger:'onChange', message: '请选择所在区县（市）' }]"
                        @click="showPicker = true"
                />
                <van-field
                        v-if="false"
                        v-model="formItem.address"
                        name="address"
                        label="详细地址："
                        @focus="bodyScrollTop"
                        rows="2"
                        autosize
                        type="textarea"
                        :maxlength="255"
                        :rules="[{ required: true, message: '详细地址不能为空' }]"
                        placeholder="请填写详细地址"
                />-->
                <van-field
                        v-model="formItem.rereason"
                        name="rereason"
                        label="复核事项："
                        :maxlength="255"
                        @focus="bodyScrollTop"
                        rows="2"
                        autosize
                        type="textarea"
                        :rules="[{ required: true, message: '申诉理由不能为空' }]"
                        placeholder="请填写申诉理由"
                />
                <div class="div-bot">
                    <van-button round block type="info" native-type="submit" class="city-card-common-btn">
                        提交
                    </van-button>
                </div>
            </van-form>
            <van-popup v-model="showPicker" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="areaList"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                />
            </van-popup>
        </div>
    </div>
</template>

<script>
import { insertPermitRecheck } from '@/api/mine'
import { identityCodeValid } from '@/libs/tools'
import { getOpenidMsg } from '@/api/yi-qing-fang-kong.js'
// 页面模拟数据
import mockData from './data/mockData.js'

export default {
  data () {
    // this.nameRules = [
    //   { required: true, message: '请输入姓名' },
    //   { validator: this.nameValidator, message: '姓名格式不正确' }
    // ]
    // this.idCardRules = [
    //   { required: true, message: '请输入证件号' },
    //   { validator: this.idCardValidator, message: '身份证件号不正确' }
    // ]
    this.phoneRules = [
      { required: true, message: '请输入手机号' },
      { validator: this.phoneValidator, message: '手机号格式错误' }
    ]
    return {
      areaList: mockData.areaList,
      showPicker: false,
      formItem: {
        name: '',
        card_no: '',
        tel: '',
        area: '',
        address: '',
        rereason: ''
      }
    }
  },
  methods: {
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    nameValidator (value) {
      const reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
      return reg.test(value)
    },
    idCardValidator (value) {
      console.log(value, '身份证值')
      let rtn = identityCodeValid(value)
      return rtn.pass
    },
    phoneValidator (val) {
      console.log(/1\d{10}/.test(val), '手机验证')
      return /1\d{10}/.test(val)
    },
    areaValidator (val) {
      if (val === '') {
        this.failNotice('请选择所在区县(市)')
        return false
      }
      return true
    },
    onSubmit (values) {
      // 校验姓名
      // if (!this.formItem.name) {
      //   this.failNotice('请输入姓名')
      //   return false
      // }
      // 校验身份证号
      if (!this.formItem.card_no) {
        this.failNotice('请输入证件号码')
        return false
      }
      // 校验手机号
      if (!this.formItem.tel) {
        this.failNotice('请输入手机号')
        return false
      }
      // 校验区县市
      // if (!this.formItem.area) {
      //   this.failNotice('请选择区县（市）')
      //   return false
      // }
      // 校验地址
      // if (!this.formItem.address) {
      //   this.failNotice('请输入详细地址')
      //   return false
      // }
      // 校验申诉理由
      if (!this.formItem.rereason) {
        this.failNotice('请输入申诉理由')
        return false
      }

      // 身份证号去空格处理
      this.formItem.card_no = this.formItem.card_no.toString().trim()
      console.log('表单最终提交', this.formItem)
      insertPermitRecheck(this.formItem).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$dialog.alert({
            message: '提交成功！'
          }).then(() => {
            this.$router.push({
              name: 'epidemic-submit-success',
              query: {}
            })
          })
        } else {
          this.$dialog.alert({
            message: '提交失败'
          })
        }
      })
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
      this.failNotice(errorInfo.errors[0].message)
    },
    onConfirm (value) {
      console.log(value, '选择器值')
      this.formItem.area = value.value
      this.showPicker = false
    },
    bodyScrollTop () {
      winToTop()
    },
    getOpenidMsg () {
      getOpenidMsg().then(ret => {
        if (ret.data.errcode === 0) {
          console.log('获取注册过的人员信息', ret.data)
          let data = ret.data.data.result
          if (data) {
            this.formItem.name = data.name
            this.formItem.card_no = data.card_no
            // let str = this.$common.xeUtils.clone(data.card_no)
            // this.formItem.card_no = str.replace(/^(.{6})(?:\d+)(.{4})$/, '$1****$2')
            // this.formItem.tel = data.tel
            console.log('处理后', this.formItem)
          } else {
            // this.$dialog.alert({
            //   message: '欢迎您办理通行证'
            // }).then(() => {
            //   this.$router.push({
            //     name: 'epidemic-submit',
            //     query: {}
            //   })
            // })
          }
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    }
  },
  mounted () {
    this.getOpenidMsg()
  }
}
</script>

<style scoped>
    .out-style {
        height: 100%;
        background-color: #F5F5F5;
    }

    .content {
        width: 100%;
        background-color: #F5F5F5;
    }

    .content >>> .van-cell {
        margin-left: 2%;
        width: 96%;
        font-size: 12px;
    }

    .title {
        width: 100%;
        padding: 0.625rem 0.9375rem;
        font-size: 12px;
    }

    .div-bot {
        margin: 10px;
    }
    .div-bot>>>.city-card-common-btn{
        padding: 0;
    }
    .div-bot >>> .van-button--info {
        border: 1px solid #75ACDC;
    }

    .div-bot >>> .van-button {
        height: 2.5rem;
    }

    .city-card-common-btn {
        color: white;
        font-size: 12px;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #75ACDC;
    }
</style>
